<template>
  <div class="radio-box" @click="change">
    <div class="noCheck" v-show="!checked"></div>
    <div class="checked" v-show="checked"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      checked: false
    }
  },
  props: {
    values: {
      type: Array,
      default: function() {
        return [true,false]
      }
    },
    defaultChecked: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.checked = this.defaultChecked
    if(this.checked) {
      this.value = this.values[0]
    }else {
      this.value = this.values[1]
    }
  },
  methods: {
    change() {
      this.checked = !this.checked
      if(this.checked) {
        this.value = this.values[0]
      }else {
        this.value = this.values[1]
      }
      this.$emit("radioChange",this.value)
    }
  }
}
</script>
<style lang="less" scoped>
.radio-box{
  display: inline-block;
}
.noCheck{
  background: url("")
    no-repeat;
  width: 18px;
  height: 18px;
}
.checked{
  background: url("")
    no-repeat;
  width: 18px;
  height: 18px;
}
</style>